<template>
  <div class="app-page">
    <div class="all_money">
      <p>可提金额：
        <b>￥{{totalAmount}}</b>
      </p>
    </div>
    <div class="user_monery">
      <div class="how_much">
        <b>提现金额:</b>
        <input type="text" disabled placeholder="请输入提现金额" v-model="totalAmount">
        <b class="right">元</b>
      </div>
      <!--<div class="all_border">
                    <b>支付宝账户:</b>
                    <input type="text" placeholder="请输入支付宝账号" v-model="zhifubao">
                    <b class="test_user" @click="getName">检测账户</b>
                  </div>
                  <div class="all_border disabled">
                    <b>账户名称：:</b>
                    <input type="text" placeholder="账户名称" v-model="userName">
                  </div>-->
    </div>
    <div class="ways">
      <h5>提现渠道：</h5>
      <!--<div class="wx" @click="selectWay(1)">
                    <img src="../../static/img/wxin.png" alt="">
                    <span class="name">微信零钱</span>
                    <span :class="{'icon':true,'select':plantType==1}"></span>
                  </div>-->
      <div class="zhifubao" @click="selectWay(2)">
        <img src="../../static/img/zhifubao.png" alt="">
        <span class="name">支付宝</span>
        <span :class="{'icon':true,'select':plantType==2}"></span>
      </div>
    </div>
    <div class="user_select" v-show="plantType==2">
      <div class="how_much">
        <b>支付宝账户:</b>
        <input type="text" class="fr" placeholder="请输入支付宝账号" v-model="account">
      </div>
      <div class="how_much">
        <b>账户实名:</b>
        <input type="text" class="fr" placeholder="请输入账户实名" v-model="accountName">
      </div>
    </div>
    <div class="make_sure">
      <button @click="makeSure" :disabled="!canGet || !accountName || !account">确认提交</button>
    </div>
    <div class="get_result" v-show="showSuccess">
      <div class="get_top">
        <img src="../../static/img/success.png" alt="">
        <p>提现申请成功!</p>
      </div>
      <div class="get_more_info">
        <p>提现金额：
          <b>{{totalAmount}}元</b>
        </p>
        <p>提现渠道：
          <b>支付宝</b>
        </p>
        <p>提现账户：
          <b>{{account}}</b>
        </p>
      </div>
      <div class="explain">
        <p>【说明】</p>
        <p>您的提现申请已经提交审核，提现金额将在2个工作日内汇入您的提现账户中。</p>
      </div>
      <div class="btn">
        <button class="get_back" @click="goIndex()">返回</button>
      </div>
    </div>
    <div class="get_result get_fail" v-show="showError">
      <div class="get_top">
        <img src="../../static/img/fail.png" alt="">
        <p>提现申请失败!</p>
      </div>
      <div class="get_more_info">
        <p>{{errorMessage}}</p>
      </div>
      <div class="btn">
        <button class="get_back" @click="goBack()">返回</button>
      </div>
    </div>
  </div>
</template>
<script>
import { applyCash } from '../service/index';

export default {
  data() {
    return {
      cash: null,
      account: '',
      accountName: '',
      canGet: true, // 提交只能点一次
      showSuccess: false, // 显示结果也
      showError: false,
      plantType: 2, // 微信：1，支付宝：2
      errorMessage: '提现申请失败',
    };
  },
  computed: {
    totalAmount() {
      return this.$store.state.totalAmount;
    },
    // openid() {
    //   return this.$store.state.openid;
    // },
  },
  methods: {
    // 选择支付宝还是微信
    selectWay(item) {
      this.plantType = item;
    },
    goBack() {
      this.showError = false;
      this.showSuccess = false;
    },
    goIndex() {
      this.$router.replace({ name: 'shopcenter', params: {} });
    },
    // 确认提交
    makeSure() {
      // if (!this.getmoney || this.getmoney <= 0 || this.getmoney > this.totalAmount) {
      //   alert('请输入正确的金额');
      //   return;
      // }
      if (!this.account) {
        alert('请输入正确的支付宝账号');
        return;
      }
      if (!this.accountName) {
        alert('请输入正确的支付宝账号名');
        return;
      }
      this.canGet = false;

      let param = {
        cash: this.totalAmount,
        account: this.account,
        accountName: this.accountName,
        plantType: this.plantType,
        // openid: this.openid,
      };

      applyCash(param)
        .then(res => {
          console.log(res);
          this.canGet = true;
          this.showSuccess = true;
        })
        .catch(ex => {
          this.errorMessage = ex;
          this.canGet = true;
          this.showError = true;
        });
    },
  },
  mounted() {
  },
};
</script>

<style scoped lang="less">
@import (reference) "../style/less/app.less";
.app-page {
  background: #eee;
}

.all_money {
  padding: 1rem;
  background: #29B171;
  line-height: 1.2;
  font-size: 18px;
  text-align: center;
  >p {
    color: #fff;
  }
  b {
    color: #fff;
    font-size: 16px;
  }
}

.how_much {
  height: 2rem;
  line-height: 1rem;
  margin: .5rem 0;
  padding: .5rem;
  font-size: .6rem;
  background: #fff;
  input {
    width: 10rem;
    margin-top: -.5rem;
    line-height: 1.8rem;
    font-size: .6rem;
    text-align: right;
  }
  .right {
    float: right;
  }
  .fr {
    float: right;
    padding-right: .3rem;
  }
  .test_user {
    padding: .5rem;
    margin: -.5rem -.5rem 0 0;
    line-height: 1rem;
    float: right;
    color: #fff;
    background: #29B171;
  }
}

.ways {
  margin: .5rem 0;
  background: #fff;
  font-size: 12px;
  >h5 {
    padding: 0 .5rem;
    line-height: 3;
    font-size: 12px;
  }
  >div {
    line-height: 0;
    padding: 10px .5rem;
    border-top: 1px solid #eee;
    img {
      width: 1rem;
      height: 1rem;
    }
    .name {
      vertical-align: text-top;
    }
    .icon {
      float: right;
      width: 1rem;
      height: 1rem;
      background: url('../../static/img/none.png') no-repeat center;
      background-size: .8rem
    }
    .select {
      background: url('../../static/img/select.png') no-repeat center;
      background-size: .8rem
    }
  }
}

.user_select {
  margin: 10px 0;
  .how_much {
    margin: 0;
    &:first-child {
      border-bottom: 1px solid #eee;
    }
  }
}

.make_sure {
  text-align: center;
  button {
    .button-solid(#fff,
    #29B171,
    transparent);
    width: 15rem;
    font-size: 16px;
  }
  .no {
    background: #eee;
    color: #888;
  }
}

.get_result {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  .get_top {
    padding: 1.2rem;
    background: #29B171;
    text-align: center;
    img {
      height: 2rem;
      width: 2rem;
    }
    >p {
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      line-height: 1.5;
    }
  }
  .get_more_info {
    margin: .8rem;
    padding: 1rem;
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    font-size: 14px;
    line-height: 2;
  }
  .explain {
    margin: .8rem;
    padding: .6rem;
    border: 1px solid #d1d1d1;
    background: #eee;
    font-size: 14px;
    line-height: 1.2;
  }
  .btn {
    text-align: center;
    >button {
      .button-solid(#fff,
      #29B171,
      transparent);
      width: 14rem;
      font-size: 14px;
    }
  }
}

.get_fail {
  .get_top {
    background: #fe7780;
  }
  .get_more_info {
    text-align: center;
    padding: 3rem 0;
  }
  .btn {
    text-align: center;
    >button {
      .button-solid(#fff,
      #29B171,
      transparent);
      width: 14rem;
      font-size: 14px;
    }
  }
}
</style>
